<template>
    <el-select
        v-model="value"
        filterable
        remote
        multiple
        clearable
        @focus="handleFocus"
        @change="handleChange"
        :placeholder="placeholder"
        :remote-method="remoteMethod"
        :loading="loading"
        >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
    import request from '@/utils/request'
    export default {
        data(){
            return{
                options: [],
                value: [],
                loading: false
            }
        },
        props:{
            placeholder:{
                type:String,
                default:''
            },
            comData: {
                type: Object,
                default: () => ({})
            }
        },
        methods: {
            handleCommonRequest: async function(data){
                const {url,value,chat} = this.comData.dataUrl
                const method = 'post'
                this.loading = true
                const res = await request({url,method,data})
                if(res.code == 200){
                    this.options = res.data.map(item => {
                        return {
                            value: item[value],
                            label: chat ? `${item[value]} ${chat} ${item.name}` : item.name
                        }
                    })
                }
                this.loading = false
            },
            handleFocus() {
                this.value.length <= 0 && this.remoteMethod('')
            },
            remoteMethod(query) {
                this.handleCommonRequest({name:query})
            },
            handleChange(val){
                const {label} = this.comData
                this.$emit('setFormData',{[label]:val})
            }
        }
    }
</script>